<template>
  <div id="header-all">
    <!-- 头部 -->
    <div id="homeTop">
      <div class="homeTop-con">
        <div class="top-home"
             @click="toHome">多好单首页</div>
        <div class="top-login"
             v-show="isLogin==false">
          <div class="login-con"
               @click="toLogin">登录</div>
          <div class="register-con"
               @click="toRegister">注册</div>
        </div>
        <div class="top-login top-phone"
             v-show="isLogin==true">
          <div class="top-phone-text">{{userInfo}}
            <div class="top-phone-img">
              <div class="img-div">
                <img src="../../../static/images/home/white.png"
                     alt="">
              </div>
            </div>
          </div>
          <div v-show="userInfo"
               class="top-phone-show"
               @click="reToken">
            退出
          </div>
        </div>
        <div class="top-fang"
             @click="toPerson">后台管理</div>
        <div class="top-tui"></div>
        <div class="top-kong"></div>
        <div class="top-help"
             @click="toApply">入驻中心</div>
        <div class="top-open"
             @click="toDD">开放API</div>
        <div class="top-link"><a style="color:#fff;"
             href="tencent://message/?uin=3053925353&Site=&Menu=yes">联系我们</a></div>
      </div>
    </div>
    <div id="header"
         class="clearfix">
      <!-- logo部分 -->
      <div class="header-left">
        <div class="header-imgdiv"
             @click="toHome()">
          <img class="header-imgdiv-img"
               src="../../../static/images/logo.png"
               alt="">
        </div>
      </div>
      <!-- 搜索栏部分 #898999;-->
      <div class="header-middle">
        <div class="middle-con">
          <div class="middle-search">
            <div class="search-input-con">
              <input class="search-text"
                     @keyup.enter="closeMain();closeMain2()"
                     v-model="searchCom"
                     type="text"
                     placeholder="请输入关键词/商品ID/商品链接">
              <!-- 点击搜索部分 -->
              <input class="search-btn"
                     @click="closeMain()"
                     type="button"
                     value="搜索">
            </div>
            <div class="search-btn-span"></div>
          </div>
        </div>
      </div>
      <!-- 登录注册 -->
      <div class="header-right">
        <div class="right-con1">
          <div class="con1-top">
            <img src="../../../static/images/home/review_icon.png"
                 alt="">
          </div>
          <div class="con1-bottom">人工审核精选</div>
        </div>
        <div class="right-con2">
          <div class="con1-top">
            <img src="../../../static/images/home/maintain_icon.png"
                 alt="">
          </div>
          <div class="con1-bottom"> 实时维护排查</div>
        </div>
        <div class="right-con3">
          <div class="con1-top">
            <img src="../../../static/images/home/review_icon.png"
                 alt="">
          </div>
          <div class="con1-bottom"> 全天持续上新</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created () {
    var getToken = this.ApiCookie.getCookie("token");
    if (getToken) {  //假设有缓存
      this.token = getToken;
      this.isLogin = true;
    }
    // 获取账户信息
    this.userInfo = this.ApiCookie.getCookie('userPhone');
    this.$nextTick(() => {
      this.checkData();
    })
  },
  data () {
    return {
      userInfo: null,
      // 页数
      topPage: null,
      // token
      token: '',
      // 用来切换是否登录显示
      isLogin: false,
      // 用户信息
      phone: '',
      // 导航下标
      navIndex: '',
      // 切换点击复制文案
      getMsgText: false,
      // 点击复制文字
      copy: false,
      // 分页的下标：
      pageIndex: 1,
      // 搜索内容
      searchCom: '',
    };
  },
  methods: {
    // 查询是否入驻userbaseinfo/get
    checkData () {
      this.axios
        .get("/userbaseinfo/get", {
          params: {
            access_token: this.token
          }
        }).then(res => {
          // console.log("查询个人团队信息回调：", res);
          if (res.data.code == 0) {
            // 保存手机号码
            let aa = res.data.data.dd_phone;
            // 处理手机号
            this.userInfo = this.hiddenPhone(aa);
            this.ApiCookie.setCookie('userPhone', this.userInfo, 1);
          } else if (res.data.code == '-1001') {
            // 如果登录token过期，重置数据，清楚token
            this.userInfo = '';
            this.isLogin = false;
            this.ApiCookie.removeCookie('userPhone');
            this.ApiCookie.removeCookie('token');
          }
        });

    },
    // 跳转到拼多多的商品详情页
    toDD () {
      // window.location.href = 'https://mobile.yangkeduo.com/goods2.html?goods_id='+e;
      window.open('https://www.kancloud.cn/fish_/duohaodan_api/1118951');
      // console.log('hahahah');
    },
    toRealTime () {
      this.$router.push({ name: "realtime" });
    },
    toGoodList () {
      this.$router.push({ name: "goodlist" });
    },
    toPictureTool () {
      this.$router.push({ name: "picturetool" });
    },
    // 隐藏手机号中间四位数方法
    hiddenPhone (mytel) {
      var tel = mytel;
      tel = "" + tel;
      var ary = tel.split("");
      ary.splice(3, 4, "****");
      var tel1 = ary.join("");
      return tel1;
    },
    closeMain2 () {
      var e = event || window.event || arguments.callee.caller.arguments[0];
      if (e && e.keyCode == 13) { // enter 键
        this.closeMain();
      }
    },
    closeMain () {
      this.$router.push({ name: "home" });
      console.log('id值', this.searchCom);
      // 保存搜索内容
      this.$emit("closeMain", this.searchCom);
      // 保存输入内容到本地
      let aa = ApiStorage.set('allData', this.searchCom);
      let bb = ApiStorage.get('allData');
      console.log('我的存储', bb);
      // this.$store.commit('setSearch',this.searchCom);
    },
    openUser () {
      console.log('跳转到团队主页')
    },
    search () {
      console.log('dddddd');
      this.$store.commit('chSearch', this.searchCom);
      console.log('搜索框内容呀呀呀呀', this.$store.state.searchData);
      this.toApply();
    },
    // !退出登录
    reToken () {
      // 删除token
      this.ApiCookie.removeCookie('token', -1);
      this.isLogin = false;
      // 并且跳转到首页
      this.toHome()
    },
    // 跳转到登录页
    toLogin () {
      this.$router.push({ name: "login" });
    },
    // 跳转到登录页
    toRegister () {
      this.$router.push({ name: "register" });
    },
    // 跳转到个人中心
    toPerson () {
        this.$router.push({ path: "/person" });
      // 把导航下标样式设置为无
      /* var getToken = this.ApiCookie.getCookie("token");
      if (getToken) {
        this.$router.push({ name: "person" });
      } else {
        this.toLogin();
      } */
    },
    // 跳转到入驻中心
    toApply () {
      var getToken = this.ApiCookie.getCookie("token");
      // 把导航下标样式设置为无
      if (getToken) {
        this.$router.push({ name: "apply" });
      } else {
        this.toLogin();
      }

    },
    // 跳转到首页
    toHome () {
      this.$router.push({ name: "home" });
    },
  },
}
</script>

<style lang="scss">
// 去除按钮默认样式
@mixin clearBtn{
    border: 0;
    background-color: transparent;
    outline: none;
}
// 图片居中显示
@mixin imgCenter{
    width:50%;
    height: 50%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    &>img{
        width:100%;
    }
} 
    #header-all{
        background: #F7FBFF;
        #homeTop{
            width:100%;
            height: 30px;
            background: #2878FF;
            .homeTop-con{
                width:1200px;
                background: #2878FF;
                height: 30px;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                line-height: 30px;
                text-align: center;
                font-size: 12px;
                color:#fff;
                .top-home,.top-login,.top-tui,.top-fang,.top-help,.top-open,.top-link{
                    flex:1;
                    cursor: pointer;
                }
                .top-home:hover,.top-tui:hover,.top-fang:hover,.top-help:hover,.top-open:hover,.top-link:hover{
                    // color:orangered;
                }
                .top-kong{
                    flex:5;
                }
                // 登录注册
                .top-login{
                    display: flex;
                    justify-content: center;
                    .login-con,.register-con{
                        width:50%;
                    }
                    .login-con:hover,.register-con:hover{
                        // color:orangered;
                    }
                }
                .top-phone{
                    position: relative;
                    .top-phone-show{
                        position: absolute;
                        top:30px;
                        left:0;
                        width:100%;
                        height: 30px;
                        border: 1px solid #eee;
                        cursor: pointer;
                        display: none;
                        z-index: 100;
                        color:#333;
                    }
                    .top-phone-text{
                        width:100%;
                        .top-phone-img{
                            position: absolute;
                            top:0;
                            right:0;
                        }
                    }
                }
                .top-login:hover .top-phone-show{
                    display: block;
                    color:#333;
                }
                .top-phone-show:hover{
                    display: block;
                }
                .top-help{
                }
            }
            
        }
        #header {
            height: 120px;
            width: 1200px;
            margin: 0 auto;
            display: flex;
            padding-bottom: 25px;
            // logo
            .header-left {
                flex: 1;
                position: relative;
                .header-imgdiv {
                    cursor: pointer;
                    position: absolute;
                    // logo
                    @include imgCenter;
                    width:100%;
                    height: 30%;
                }
            }
            // 搜索栏
            .header-middle {
                flex: 3;
                .middle-con {
                    width: 100%;
                    margin-top: 20px;
                    .middle-input {
                        padding-left: 8%;
                        // 静态按钮样式
                        .middle-btn1,.middle-btn2 {
                            @include clearBtn;
                            width: 44px;
                            height: 22px;
                            color:#ED3A29;
                        }
                    }
                    // 搜索框
                    .middle-search{
                        .search-input-con{
                            margin-top:45px;
                            margin-left:95px;
                            border: 1px solid #2878FF;;
                            width:500px;
                            border-radius: 30px;
                            position: relative;
                            .search-text{
                                width:400px;
                                height: 44px;
                                @include clearBtn;
                                padding-left:16px;
                            }
                            .search-btn{
                                position: absolute;
                                top:0;
                                right:-2px;
                                width:100px;
                                height: 44px;
                                @include clearBtn;
                                background: #2878FF;
                                border: 1px solid #2878FF;
                                border-top-right-radius: 30px;
                                border-bottom-right-radius: 30px;
                                color:#fff;
                                float: right;
                            }
                            
                        }
                    }
                    // 输入框下的文本
                    .middle-text {
                        width: 100%;
                        height: 30px;
                        padding-left: 8%;
                        font-size: 12px;
                        cursor: pointer;
                        &>span {
                            display: inline-block;
                            width: 60px;
                            height: 30px;
                            line-height: 30px;
                            text-align: center;
                            &>a {
                                color: #666;
                            }
                            &>a:hover {
                                color: #ED3A29;
                            }
                        }
                        .middle-text1 {
                            width: 80px;
                        }
                    }
                }
            }
            // 登录注册部分
            .header-right {
                width:300px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                padding-top:10px;
                text-align: center;
                .right-con1{
                    flex:1;
                    .con1-top{
                        width:40px;
                        margin: 0 auto;
                    }
                }
                .right-con2{
                    flex:1;
                    .con1-top{
                        width:40px;
                        margin: 0 auto;
                    }
                }
                .right-con3{
                    flex:1;
                    .con1-top{
                        width:40px;
                        margin: 0 auto;
                    }
                }
                // 没有注册时
                /* .header-right-con {
                    cursor:pointer;
                    float: right;
                    width: 224px;
                    height: 40px;
                    padding-top: 45px;
                    // 按钮部分
                    .login-btn,
                    .register-btn {
                        @include clearBtn;
                        width: 100px;
                        height: 40px;
                        color: #fff;
                    }
                    .login-btn {
                        // background-color: orangered;
                        background:linear-gradient(90deg,rgba(217,46,30,1),rgba(255,86,43,1));
                    }
                    .register-btn {
                        margin-left: 10px;
                        color: orangered;
                        border: 1px solid orangered;
                    }
                }
                // 个人中，已登录部分
                .header-right-login {
                    float: right;
                    width: 224px;
                    height: 60px;
                    padding-top: 40px;
                    position: relative;
                    display: flex;
                    z-index: 100;
                    cursor: pointer;
                    // 头像
                    .right-right-div {
                        flex: 1;
                    }
                    .right-login-img {
                        flex: 1;
                        position: relative;
                        .login-img-con {
                            border: 1px solid #eee;
                            position: absolute;
                            width: 50px;
                            height: 50px;
                            border-radius: 60px;
                            overflow: hidden;
                            &>img {
                                @include imgCenter;
                                width:100%;
                                height: 100%;
                            }
                        }
                    }
                    // 手机号码
                    .right-login-num {
                        flex: 2;
                        height: 30px;
                        line-height: 30px;
                        margin-top: 15px;
                    }
                    // 个人中心列表
                    .header-login-list {
                        width: 135px;
                        height: 80px;
                        position: absolute;
                        top: 100px;
                        left: 65px;
                        text-align: center;
                        background: #fff;
                        box-shadow: 2px 2px 5px #ccc;
                        border: 1px solid #eee;
                        display: none;
                        .login-list-con1,
                        .login-list-con2 {
                            height: 40px;
                            line-height: 40px;
                            background: #fff;
                            font-size: 14px;
                            font-weight: bold;
                            box-sizing: border-box;
                        }
                        &>div:hover {
                            background: #eee;
                        }
                    }
                    // 三角形
                    .login-triangle-con{
                        position: absolute;
                        top:95px;
                        left:81px;
                        width: 0;
                        height: 0;
                        border-left: 6px solid transparent;
                        border-bottom: 6px solid #efefef;
                        border-right: 6px solid transparent;
                        display: none;
                    }
                } 
                // 
                .header-right-login:hover .header-login-list {
                    display: block;
                }
                .header-right-login:hover .login-triangle-con {
                    display: block;
                } */
            }
        }
        // 导航栏
        #nav {
            width: 100%;
            .nav-bottom {
                width: 100%;
                border-bottom: 1px solid #eee;
                font-family: 'MicrosoftYaHei';
                font-weight: bold;
                .nav-con {
                    width: 1200px;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    font-size: 16px;
                    margin: 0 auto;
                    cursor: pointer;
                    &>.nav-son {
                        width: 150px;
                        float: left;
                        box-sizing: border-box;
                    }
                    /* &>.nav-son:hover{
                        color:#2878FF;
                    } */
                    /* .textbottom {
                        box-sizing: border-box;
                        border-bottom: 3px solid #ED3A29;
                        color: #ED3A29;
                    } */
                }
            }
            // 全网商品分类
            .nav-con2 {
                width: 100%;
                .nav-all-con {
                    width: 1200px;
                    margin: 0 auto;
                    padding-top: 10px;
                    .nav-all-list {
                        .all-list-title {
                            width: 6%;
                            height: 80px;
                            float: left;
                            font-size: 16px;
                            color: #666;
                            font-weight: bold;
                        }
                        .all-list-con {
                            width: 94%;
                            height: 80px;
                            float: left;
                            font-size: 0;
                            &>span {
                                width: 90px;
                                height: 30px;
                                display: inline-block;
                                font-size: 12px;
                                color: #666;
                                padding-top: 3px;
                                cursor: pointer;
                            }
                            &>span:hover {
                                color: #ED3A29;
                            }
                        }
                    }
                    .nav-all-check {
                        .all-check-title {
                            width: 6%;
                            height: 50px;
                            line-height: 50px;
                            float: left;
                            font-size: 16px;
                            color: #666;
                            font-weight: bold;
                        }
                        .all-check-con {
                            width: 94%;
                            height: 50px;
                            padding-top: 8px;
                            display: flex;
                            font-size: 12px;
                            .nav-price,
                            .nav-quan,
                            .nav-bili,
                            .nav-sales,
                            .nav-input {
                                &>input {
                                    border: 0;
                                    width: 70px;
                                    height: 30px;
                                    border: 1px solid #ccc;
                                    border-radius: 1px;
                                    margin-left: 10px;
                                    margin-right: 10px;
                                    color: #666;
                                    padding-left:10px;
                                }
                            }
                            .nav-price {
                                flex: 5;
                                &>input {
                                    margin-right: 0 5px;
                                }
                            }
                            .nav-quan,.nav-bili,.nav-sales,.nav-right {
                                flex: 4;
                            }
                            .nav-input {
                                flex: 2;
                                .input-con {
                                    &>input {
                                        width: 80px;
                                        height: 35px;
                                        border-radius: 3px;
                                        background: #ED3A29;
                                        color: #fff;
                                        @include clearBtn;
                                        background: #ED3A29;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            // 全网分类标题
            .nav-allweb-list {
                width: 100%;
                background: #F7FBFF;
                .nav-allweb-top {
                    width: 100%;
                    height: 15px;
                    margin-top: 10px;
                }
                .allweb-list-con {
                    width: 100%;
                    background: #F7FBFF;
                    .allweb-all {
                        width: 1200px;
                        margin: 0 auto;
                        display: flex;
                        &>div {
                            height: 30px;
                            line-height: 30px;
                            text-align: center;
                            font-size: 14px;
                            font-weight: 700;
                            color: #666;
                        }
                        .allweb-list-sales,.allweb-list-right {
                            flex: 1;
                            cursor: pointer;
                        }
                        /* .textbottom2 {
                            color:#fff;
                            background: orangered;
                        }
                        .textbottom2::after {
                            display: block;
                            content: "";
                            border-top: 2px solid #ED3A29;
                            width: 60%;
                            margin: -5px auto 0;
                        } */
                    }
                }
            }
        }
        // 广告位
        #header-ad{
            width:100%;
            height: 120px;
            background: #F7FBFF;
            .header-ad-con{
                width:1200px;
                height: 120px;
                margin: 0 auto;
                background: #F7FBFF;
                display: flex;
                justify-content: center;
                align-items: center;
                .ad-con-left{
                    flex:1;
                    background: #f2f2f2;
                    margin-top: 10px;
                    height: 90px;
                    border: 1px solid #ccc;
                }
                .ad-con-right{
                    margin-top: 10px;
                    flex:1;
                    background: #f2f2f2;
                    height: 90px;
                    border: 1px solid #ccc;
                }
            }
        }
        // 分类导航
        #header-sort{
            width:100%;
            background: #F7FBFF;
            .header-sort-con{
                width:1200px;
                margin: 0 auto;
                font-size: 12px;
                margin-top: 10px;
                .sort-con-top{
                    width:1200px;
                    height: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-top:1px solid #eee;
                    border-bottom:1px solid #eee;
                    .sort-top-title{
                        flex:1;
                        width:100px;
                        height: 50px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-right:1px solid #eee;
                    }
                    .sort-top-con{
                        flex:11;
                        height: 50px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-left:18px;
                        .con-nav-list{
                            flex:1;
                            text-align: center;
                            cursor: pointer;
                        }
                        .con-nav-kong{
                            flex:4;
                        }
                    }
                }
                .sort-con-bottom{
                    width:100%;
                    height: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-bottom:1px solid #eee;
                    .sort-bottom-title{
                        flex:1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 50px;
                        border-right:1px solid #eee;
                        color:red !important;
                    }
                    .sort-bottom-con{
                        flex:11;
                        height: 50px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .all-check-con {
                            width: 94%;
                            height: 30px;
                            display: flex;
                            font-size: 12px;
                            margin-left: 33px;
                            .nav-price,
                            .nav-quan,
                            .nav-bili,
                            .nav-sales,
                            .nav-input {
                                &>input {
                                    border: 0;
                                    width: 50px;
                                    height: 30px;
                                    border: 1px solid #ccc;
                                    border-radius: 1px;
                                    margin-left: 10px;
                                    margin-right: 10px;
                                    color: #666;
                                    padding-left:10px;
                                }
                            }
                            .nav-price {
                                flex: 5;
                                &>input {
                                    margin-right: 0 5px;
                                }
                            }
                            .nav-quan,.nav-bili,.nav-sales{
                                flex: 4;
                            }
                            .nav-right {
                                flex:6;
                            }
                        }
                        .nav-input {
                            flex: 2;
                            margin-left:20px;
                            .input-con {
                                &>input {
                                    width: 50px;
                                    height: 30px;
                                    border-radius: 2px;
                                    color: #fff;
                                    @include clearBtn;
                                    background: #E3544C;
                                    float: right;
                                }
                            }
                        }
                    }
                }
                // 已选条件
                .sort-con-show{
                    width:100%;
                    height: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-bottom:1px solid #eee;
                    .sort-bottom-title{
                        flex:1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 50px;
                        color:red !important;
                    }
                    .sort-bottom-con{
                        flex:11;
                        height: 50px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .sort-bottom-xuan{
                            flex: 10;
                            width: 94%;
                            height: 30px;
                            display: flex;
                            font-size: 12px;
                            .xuan-con{
                                width:150px;
                                height: 30px;
                                line-height: 30px;
                                border: 1px solid #ccc;
                                text-align: center;
                                margin-left:20px;
                                &>span{
                                    float: right;
                                    margin-right:10px;
                                }
                            }
                        }
                        .nav-input {
                            flex: 2;
                            margin-left:20px;
                            .input-con {
                                &>input {
                                    width: 120px;
                                    height: 30px;
                                    border-radius: 2px;
                                    color: #fff;
                                    @include clearBtn;
                                    background: #E3544C;
                                    float: right;
                                }
                            }
                        }
                    }
                }
            }
        }
        // 最终分类
        #header-last{
            width:100%;
            .header-last-con{
                width:1200px;
                height: 60px;
                margin: 0 auto;
                background: #F7FBFF;
                border: 1px solid #eee;
                margin-bottom: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                .allweb-all {
                    flex:5;
                    width: 600px;
                    display: flex;
                    padding: 15px;
                    &>div {
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        font-size: 14px;
                        font-weight: 700;
                        color: #666;
                    }
                    .allweb-list-sales,.allweb-list-right {
                        flex: 1;
                        cursor: pointer;
                        background: #F7FBFF;
                        border-right:1px solid #f2f2f2;
                        transition: all 0.1s;
                        overflow: hidden;
                    }
                    .allweb-list-radio{
                        width:200px;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        text-align: center;
                        .radio-con{
                        flex:1;
                        label{
                            padding-left:5px;
                        }
                        }
                    }
                }
                .allweb-list-page{
                    flex:3;
                    width:120px;
                    height: 30px;
                    line-height: 30px;
                    .list-page-con{
                        width:100%;
                        display: flex;
                        .page-text{
                            flex:1;
                            width:120px;
                            height: 30px;
                            text-align: right;
                            font-size: 12px;
                            // color:rgb(204, 62, 10);
                            &>span{
                                font-size: 12px;
                                color:#666;
                            }
                        }
                        
                    }
                }
            }
        }
    }

// 点击下标样式
.textbottom{
    color:#2878FF;
}
  
</style>
